<template>
	<div class="company-userinfo">
		<!-- 用户资料 -->
		<div class="company-userinfo-head flex">
			<div class="company-userinfo-head-img flexCenter">
				<img :src="imgs1" alt="" v-if="imgs1!=''"/>
				<img v-else src="../../assets/images/tx.png" alt=""/>
				<!-- <span v-else>LOGO</span> -->
			</div>
			<div class="company-userinfo-head-text flexColumn">
				<p class="h99">{{$t('common.company.companytask4')}}</p>
				<p class="h99">{{$t('common.company.companytask5')}}</p>
				<el-upload action="" :before-upload="logoUpload">
					<span class="color1">{{$t('common.company.upload')}}</span>
				</el-upload>
			</div>
		</div>
		<div class="company-userinfo-content">
			<div class="zmlTitle">{{$t('common.leftNav.userinfo')}}</div>
			<div class="company-userinfo-table">
				<table>
					<tr>
						<td class="title">{{$t('common.company.companyName')}}：</td>
						<td><el-input v-model="formData.enterpriseName"></el-input></td>
						<td class="title">{{$t('common.company.companyCode')}}：</td>
						<td><el-input v-model="formData.uscc" ></el-input></td>
					</tr>
					<tr>
						<td class="title">{{$t('common.company.phone')}}：</td>
						<!-- <td><el-input v-model="formData.bindPhone" readonly="readonly"></el-input></td> -->
						<td>{{formData.bindPhone}}</td>
						<td class="title">{{$t('common.company.companyNature')}}：</td>
						<td>
							<el-select v-model="formData.corporateType" placeholder="请选择" @change="bindChange" :popper-append-to-body="false">
							    <el-option
							      v-for="item in options"
							      :key="item.value"
							      :label="item.text"
							      :value="item.value">
							    </el-option>
							  </el-select>	
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<button class="zmlBtn1" @click="baocun">{{$t('common.newJob.save')}}</button>
							<button class="zmlBtn2" @click="quxiao">{{$t('common.company.cancel')}}</button>
						</td>
						<td></td>
						<td></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>
<script>
	import {ajax,ajaxAdd,showToast,showToastSuccess,beforeUpload} from '@/utils/js.js'
	import {uploadFile,cuserInfoUp,details,qyNature} from '@/services/api.js'
  export default{
    data(){
      return{
				imgUrl:this.$store.state.imgUrl,
				imgs1:'',
				options:'',
				formData:{
					"bindPhone": this.$store.state.userInfo.phone,
					"code": "",
					"corporateType": "",
					"enterpriseName": "",
					"logoId": "",
					"password": "",
					"uscc": ""
				},
				resetData:{},
				baocunShow:true,
      }
    },
	methods:{
		// 下拉框改变时
		bindChange(e){
			console.log(this.value)
		},
		// 保存
		baocun(){
			if(JSON.stringify(this.formData) == JSON.stringify(this.resetData)){
				showToast(this,this.$t('common.company.noInfo'))
			}else{
				if(this.baocunShow){
					this.baocunShow = false
					ajaxAdd(this,cuserInfoUp,this.formData,res=>{
						showToastSuccess(this,res.msg)
						this.$store.state.userInfo.name = this.formData.enterpriseName
						this.$store.state.userInfo.path = this.imgs1
						this.$store.state.userInfo.corporateType = this.formData.corporateType
						this.$store.state.userInfo.uscc = this.formData.uscc
						this.baocunShow = true
						this.content()
					},err=>{
						showToast(this,err.msg)
						this.baocunShow = true
					})
				}
				
			}
			
		},
		// 取消
		quxiao(){
			this.formData = {...this.resetData}
			this.resetData = {...this.resetData}
		},
		//logo上传
		logoUpload(file){
			let data = new FormData()
			data.append('file', file)
			const typeList = ["jpg", "png"];
			beforeUpload(file,typeList,3072000,d=>{
				ajax(this,uploadFile,data,res=>{
					this.imgs1 = this.imgUrl+res.data.path
					this.formData.logoId = res.data.id
					showToast(this,res.msg,1)
				},err=>{
					showToast(this,err.msg)
				})
				return false
			})
			
		},
		content(){
			ajax(this,qyNature,{lxjp:"corporateType"},res=>{
				console.log(res)
				this.options = res.data
			})
			let userInfo = this.$store.state.userInfo
			let newData = {
				enterpriseName:userInfo.name,
				corporateType:userInfo.corporateType,
				bindPhone:userInfo.phone,
				uscc:userInfo.uscc,
				logoId:this.formData.logoId,
			}
			this.formData = newData
			this.resetData = {...newData}
			this.imgs1 = userInfo.path
		}
		
	},
	mounted() {
		this.content()
    
		
	},
	watch:{
		'$i18n.locale'(){
			this.content()
		},
	}
  }
</script>
<style lang="scss">
.company-userinfo{
	background-color: #fff;
	padding: 0 30px;
	min-height: 890px;
	.company-userinfo-head{
		padding: 30px 0;
		border-bottom: 1px solid #D1D1D1;
		.company-userinfo-head-img{
			width: 100px;
			height: 100px;
			overflow: hidden;
			background-color: #F5F5F5;
			color: #999;
		}
		.company-userinfo-head-text{
			flex: 1;
			padding: 5px 0;
			padding-left: 20px;
			justify-content: space-between;
			
		}
	}
	.company-userinfo-table{
		width: 100%;
		padding-left: 13px;
		table{
			width: 100%;
			td{
				padding: 6px 0;
			}
			tr{
				.title{
					text-align: right;
				}
				button{
					margin-right: 12px;
					margin-top: 20px;
					border-radius:2px;
				}
				.zmlBtn2{
					border:1px solid rgba(230,226,226,1);
					color: #999;
				}
			}
		}
		input{
			width: 260px;
		}
	}
}
</style>
